-<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%@ include file = "include/base.jsp"%>
<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="utf-8"/>
        <title>Ninja UI Registration Demo</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="<%=basePath %>js/dl/css/style.css" />
    </head>
    <body>
	<div id="sitebody">
		<header>
		<nav>
			 <span id="tabs"></span>
		</nav>
		</header>
        <section>
			<h1>凯胜CRM管理系统</h1>
			<form>
				<div id="extra1">
					<p><label>用户名:</label> <input type="text"></p>
					<p><label>密码:</label> <input type="password"></p>					
					<p><label>邮箱:</label> <input type="text"></p>
					<p><label>所在组:</label> 
						<select style="width:245px;height:30px;border-radius: 3px 3px 0 0;">
							<option></option>
							<option>市场部</option>
							<option>销售部</option>
							<option>研发部</option>	
						</select>			
					</p>		
					<p><label>输入验证码:</label><input type="password"></p>
					<p id="avaimgwrap" style="margin-left:120px"><img id="avaimg" src="<%=basePath%>jcaptcha.jpg"></p>
				</div>				
			</form>
			<form action="<%=basePath %>login.action" method="post" id="myform2">
				<div id="extra2">
					<p><label>用户名:</label> <input type="text" name="user.username"></p>
					<p><label>密码:</label> <input type="password" name="user.password"></p>				
				</div>				
			</form>			
			<div id="me">
				<p id="usageButton"></p>
			</div>
			<div id="my">
				<p id="usageButton2"></p>
			</div>			
        </section>
	</div>
	
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/2.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
<script type="text/javascript" src = "<%=basePath%>js/jquery.validate.js"></script>
<script src="<%=basePath %>js/dl/js/jquery.ninjaui.min.js"></script>
<script type="text/javascript">
	(function ($) {
	var $autocompleteExample = $.ninja.autocomplete({
		placeholder: 'United States Cities'
		}).values(function (event) {
		$.ajax({
		url: 'http://ws.geonames.org/searchJSON',
		dataType: 'jsonp',
		data: {
		  country: 'US',
		  featureClass: 'P',
		  fuzzy: 0,
		  maxRows: 10,
		  q: event.query
		},
		});
	});
	
	$tabs = $.ninja.tabs({
	values: [
	  {
		html: '<div style="padding:5px">注册界面</div>',
		select: function () {
			$('#extra1').fadeIn();
			$('#extra2').fadeOut();
			$('#me').fadeIn();
			$('#my').fadeOut();
		}
	  },
	  {
		html: '<div style="padding:5px">登陆界面</div>',
		select: function () {
			$('#my').fadeIn();
			$('#extra2').fadeIn();
			$('#extra1').fadeOut();
			$('#me').fadeOut();
		}
	  }
	]
	});	

	var $dialog, $button = $.ninja.button({
		html: '<div style="padding:5px">注册</div>'
	}).select(function () {
		alert("haha");
		$dialog.attach();
	});
	var $dialog, $button2 = $.ninja.button({
		html: '<div style="padding:5px">登陆</div>'
	}).select(function () {
		$("#myform2").submit();
		alert("hehe");
		//$dialog.attach();
	});
	
	$dialog = $.ninja.dialog({
		html: '<div style="padding: 50px">注册成功! 欢迎来到凯盛CRM管理系统,请登录</div>'
	}).detach(function () {
		$button.deselect();
		$('#extra2').fadeIn();
		$('#extra1').hide();
	});

	var
	$slider = $.ninja.slider({
	  value: 1,
	  values: [
		{ 
			select: function(){
				$('#avaimg').animate({width:'-=30px'});
			}
		},
		{ 
			select: function(){
				$('#avaimg').animate({width:'100px'});
			}
		},
		{ 
			select: function(){
				$('#avaimg').animate({width:'+=30px'});
			}
		}
	  ]
	});	

	$(document).ready(function () {
		$('#tabs').append($tabs);
		$('#city').append($autocompleteExample);
		$('#usageButton').append($button);
		$('#usageButton2').append($button2);
		$('#ava').append($slider);
		$('#poli').append($policy);
	});
}(jQuery));	  
</script>		
    </body>
</html>